<template>
  <view class="price-container">
    <view class="header-nav">
      <u-subsection
        :list="list"
        :current="currentIndex"
        active-color="#fff"
        button-color="#56d39d"
        bg-color="#f3f7fb"
        @change="changeAppletType"></u-subsection>
    </view>
    <view class="set-price-content">

      <block v-if="picList && picList.length > 0">
        <Title title="图文定制" :custom-style="{
          'marginBottom': '24rpx',
          'fontSize': '32rpx',
          'fontWeight': '700',
          'color': '#333'
        }"></Title>

        <view class="price-list-container">
          <view
            v-for="item in picList"
            :key="item.id"
            class="price-list-item">
            <view class="price-item-title">{{ item.title }}</view>
            <view class="price-content">
              <view class="label">自定义价格</view>
              <u-input
                v-model="item.value"
                type="text"
                :border="true"
                placeholder="请输入价格"
                class="price-input"
                :min="item.lowest_price" />
            </view>
            <view class="price-tip">最低价格为{{ item.lowest_price }}元，设置低于最低价格，则跟随平台价格</view>
          </view>
        </view>
      </block>

      <block v-if="videoList && videoList.length > 0">
        <Title title="视频定制" :custom-style="{
          'marginBottom': '24rpx',
          'fontSize': '32rpx',
          'fontWeight': '700',
          'color': '#333'
        }"></Title>

        <view class="price-list-container">
          <view
            v-for="item in videoList"
            :key="item.id"
            class="price-list-item">
            <view class="price-item-title">{{ item.title }}</view>
            <view class="price-content">
              <view class="label">自定义价格</view>
              <u-input
                v-model="item.value"
                type="text"
                :border="true"
                placeholder="请输入价格"
                class="price-input"
                :min="item.lowest_price" />
            </view>
            <view class="price-tip">最低价格为{{ item.lowest_price }}元，设置低于最低价格，则跟随平台价格</view>
          </view>
        </view>
      </block>
    </view>
    <!-- 保存 -->
    <view class="save-btn-container">
      <view class="btn" @click="handleSavePriceSet">确认提交</view>
    </view>
  </view>
</template>

<script>
  import Title from '@/components/title/title';
  import { sumbitMerchantVipPirce, queryVipPriceList } from '@/api/applet';
  export default {
    components: {
      Title
    },
    data() {
      return {
        currentIndex: 0,
        list: [{
          name: '抖音',
          value: 'mp-toutiao'
        }, {
          name: '快手',
          value: 'mp-kuaishou'
        }, {
          name: '微信',
          value: 'mp-weixin'
        }],
        videoList: [],
        picList: [],
        author_id: ''
      }
    },

    onLoad(options) {
      this.author_id = options.author_id;
      this.getVipPriceList();
    },

    methods: {

      // 获取自定义价格列表
      getVipPriceList() {
        uni.showLoading({
          title: '加载中'
        })
        queryVipPriceList({
          author_id: this.author_id,
          applet_type: this.list[this.currentIndex].value,
        }).then(result => {
          uni.hideLoading();
          if (result && result.data) {
            let data = result.data;
            data.forEach(item => {
              item.value = item.value;
            })
            let videoList = data.filter(item => item.member_type === '1');
            let picList = data.filter(item => item.member_type === '2');
            this.videoList = videoList;
            this.picList = picList;
          }
        }).catch(() => {
          uni.hideLoading();
        });
      },

      // 切换
      changeAppletType(index) {
        this.currentIndex = index;
        this.getVipPriceList();
      },

      // 保存
      handleSavePriceSet() {
        let setPriceList = [ ...this.videoList, ...this.picList ];
        if (setPriceList && setPriceList.length > 0) {
          for (const item of setPriceList) {
            let price = parseFloat(item.value || 0) || 0;
            let lowest_price = parseFloat(item.lowest_price);
            if (price < lowest_price) {
              uni.showToast({
                title: '自定义价格不能低于最低售价',
                icon: 'none'
              });
              return;
            }
          }
          uni.showLoading({
            title: '提交中'
          })
          sumbitMerchantVipPirce({
            author_id: this.author_id,
            applet_type: this.list[this.currentIndex].value,
            price_list: setPriceList
          }).then(result => {
            uni.hideLoading();
            if (result && result.code === 200) {
              uni.showToast({
                title: '设置成功',
                icon: 'none'
              })
            }
          })
        } else {
          uni.hideLoading();
          uni.showToast({
            title: '暂不可设置',
            icon: 'none'
          })
        }
        // sumbitMerchantVipPirce()
      }

    }
  }
</script>

<style lang="scss" scoped>
  page{
    background-color: #fff;
  }
  .price-container{
    padding: 32rpx 32rpx 130rpx 32rpx;

    .header-nav{
      padding: 32rpx;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      background-color: #fff;
      z-index: 99;
    }

    .tab-container{
      display: flex;
    }

    .set-price-content{
      margin-top: 100rpx;
    }

    .price-list-container{

      .price-list-item{
        margin-bottom: 24rpx;
        padding: 24rpx;
        background-color: #f8f8f8;
        border-radius: 16rpx;
      }

      .price-item-title{
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 12rpx;
      }

      .price-content{
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;

        .label{
          width: 150rpx;
          color: #888;
        }

        .price-input{
          background-color: #fff;
        }
      }

      .price-tip{
        font-size: 24rpx;
        color: #f73a3a;
      }
    }
  }

  .save-btn-container{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 120rpx;
    padding: 0 24rpx;
    display: flex;
    align-items: center;
    background-color: #f8f8f8;

    .btn{
      background-color: $uni-color-primary;
      color: #fff;
      flex: 1;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      border-radius: 16rpx;
    }
  }
</style>
